<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液检验结果审核</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <style type="text/css">
        .el-dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0 !important;
            transform: translate(-50%, -50%);
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
            display: flex;
            flex-direction: column;
        }

        .el-dialog__body {
            overflow: auto;
        }

        .el-row{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }

    </style>
</head>

<body>
    <div class="data-manage-table">
        <template>
            <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
                <el-form-item label="检验单号">
                    <el-input style="width: 195px;" placeholder="请输入检验单号" v-model="searchSample.inspectionSheet"></el-input>
                </el-form-item>
                <el-form-item label="患者血样编号">
                    <el-input  placeholder="请输入患者血样编号" v-model="searchSample.bloodSampleNumber"></el-input>
                </el-form-item>

                <el-form-item label="患者病历号">
                    <el-input style="width: 195px;"placeholder="请输入病历号" v-model="searchSample.medicalRecordNumber"></el-input>

                </el-form-item>

                <el-form-item label="患者姓名">
                    <el-input style="width: 195px;"placeholder="请输入患者姓名" v-model="searchSample.name"></el-input>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核人">
                    <el-input style="width: 195px;"placeholder="请输入审核人" v-model="searchSample.reviewerName"></el-input>
                    </el-select>
                </el-form-item>
                <el-form-item label="审核时间">
                    <el-date-picker v-model="searchSample.reviewTime" type="datetimerange" size="small"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="状态" prop="state">
                    <el-select style="width: 150px;"v-model="searchSample.reviewState">
                        <el-option v-for="item in statesList" :key="item.name" :label="item.name"
                                   :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>

                    <el-button type="primary"@click="search">搜索</el-button>
                    <el-button type="info"@click="clear">清空</el-button>
                </el-form-item>
            </el-form>
<!--            //验血审核弹窗-->
            <el-dialog title="验血结果审核" center :visible.sync="reviewVisible" width="40%">

                <el-form ref="form" :model="addForm" :rules="addFormRules" label-width="150px">

                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="检验单号">{{addForm.inspectionSheet}}</el-descriptions-item>
                        <el-descriptions-item label="患者血样编号">{{addForm.bloodSampleNumber}}</el-descriptions-item>
                        <el-descriptions-item label="病历号">{{addForm.medicalRecordNumber}}</el-descriptions-item>
                        <el-descriptions-item label="患者姓名">{{addForm.name}}</el-descriptions-item>
                        <el-descriptions-item label="abo血型">{{getAboName(addForm.bloodType)}}</el-descriptions-item>
                        <el-descriptions-item label="Rhd血型">{{getRhName(addForm.rhd)}}</el-descriptions-item>
                        <el-descriptions-item label="谷丙转氨酶">{{getBloodTestResultsName(addForm.alt)}}</el-descriptions-item>
                        <el-descriptions-item label="艾滋病抗体">{{ getBloodTestResultsName(addForm.hiv)}}</el-descriptions-item>
                        <el-descriptions-item label="红细胞">{{addForm.rbc}}</el-descriptions-item>
                        <el-descriptions-item label="乙肝表面抗原">{{getBloodTestResultsName(addForm.hbsag)}}</el-descriptions-item>
                        <el-descriptions-item label="血红蛋白">{{addForm.hb}}</el-descriptions-item>
                        <el-descriptions-item label="丙肝抗体">{{getBloodTestResultsName(addForm.hcv)}}</el-descriptions-item>
                        <el-descriptions-item label="血小板">{{addForm.plt}}</el-descriptions-item>
                        <el-descriptions-item label="梅毒">{{getBloodTestResultsName(addForm.rpr)}}</el-descriptions-item>

                        <el-descriptions-item label="审核人工号"  prop="reviewerNumber" >
                            <el-input style="width: 195px;"  placeholder="请输入审核人工号" v-model="addForm.reviewerNumber"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="审核人"prop="reviewerName">
                            <el-input style="width: 195px;"  placeholder="请输入审核人姓名" v-model="addForm.reviewerName"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="审核" prop="state">
                            <el-radio-group   v-model="addForm.state" style="width: 240px;">
                                <el-radio label="审核通过"  border></el-radio>
                                <el-radio label="驳回" border @change="checkReview"></el-radio>
                            </el-radio-group>
                        </el-descriptions-item>
                        <el-descriptions-item label="驳回原因"prop="rejectReason">
                            <el-input :disabled='rejectInput' type="textarea" style="width: 195px;"
                                      placeholder="请输入驳回原因"
                                      v-model="addForm.rejectReason"></el-input>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>

                <!-- 底部区域 -->
                <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel">取 消</el-button>
                            <el-button type="primary" @click="addReview()">确 定</el-button>
                </span>
            </el-dialog>

            <el-table :data="tableData" style="width: 70%"border
                      ref="multipleTable"
                      type="selection"
                :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                @current-change="">
                <el-table-column type="selection" width="55" align="center"></el-table-column>

                <el-table-column type="expand" >
                    <template slot-scope="props">
                        <el-form label-position="left" label-width="auto" class="demo-table-expand">
                            <el-form-item label="检验单号:">
                                <span>{{ props.row.inspectionSheet }}</span>
                            </el-form-item>
                            <el-form-item label="患者血样编号:">
                                <span>{{ props.row.bloodSampleNumber }}</span>
                            </el-form-item>
                            <el-form-item label="患者病例号:" >
                                <span>{{ props.row.medicalRecordNumber }}</span>
                            </el-form-item>
                            <el-form-item label="患者姓名:">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="受血者abo血型:">
                                <span>{{ getAboName(props.row.bloodType) }}</span>
                            </el-form-item>
                            <el-form-item label="受血者rh血型:">
                                <span>{{ getRhName(props.row.rhd) }}</span>
                            </el-form-item>
                            <el-form-item label="谷丙转氨酶:">
                                <span>{{ getBloodTestResultsName(props.row.alt) }}</span>
                            </el-form-item>
                            <el-form-item label="艾滋病抗体:">
                                <span>{{ getBloodTestResultsName(props.row.hiv) }}</span>
                            </el-form-item>
                            <el-form-item label="红细胞:">
                                <span>{{ props.row.rbc }}</span>
                            </el-form-item>
                            <el-form-item label="乙肝表面抗原:">
                                <span>{{ getBloodTestResultsName(props.row.hbsag) }}</span>
                            </el-form-item>
                            <el-form-item label="血红蛋白:">
                                <span>{{ props.row.hb }}</span>
                            </el-form-item>
                            <el-form-item label="丙肝抗体:">
                                <span>{{ getBloodTestResultsName(props.row.hcv) }}</span>
                            </el-form-item>
                            <el-form-item label="血小板:">
                                <span>{{ props.row.plt }}</span>
                            </el-form-item>
                            <el-form-item label="梅毒:">
                                <span>{{ getBloodTestResultsName(props.row.rpr) }}</span>
                            </el-form-item>
                            <el-form-item label="审核人工号:">
                                <span>{{ (props.row.reviewerNumber)}}</span>
                            </el-form-item>
                            <el-form-item label="审核人:">
                                <span>{{ (props.row.reviewerName)}}</span>
                            </el-form-item>

                            <el-form-item label="审核状态:">
                                <span>{{ getStateName(props.row.reviewState) }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>


                <el-table-column prop="inspectionSheet" label="检验单号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="bloodSampleNumber" label="患者血样编号" width="150" align="center">
                </el-table-column>
                <el-table-column prop="medicalRecordNumber" label="患者病历号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="name" label="患者姓名" width="200" align="center">
                </el-table-column>
                <el-table-column prop="reviewerNumber" label="审核人工号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="reviewerName" label="审核人" width="200" align="center">
                </el-table-column>
                <el-table-column prop="reviewTime" label="审核时间" width="220" align="center":formatter="formatDate">
                </el-table-column>
                <el-table-column prop="reviewState" label="审核状态" width="200" align="center">
                    <template slot-scope="scope">
                        {{ getStateName(scope.row.reviewState) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="bloodReview(scope.$index, scope.row)"
                                   :disabled="scope.row.reviewState == '1' ? false : true">审核
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="current"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="text-align: center; margin-top: 20px;"
                        :total="total">
                </el-pagination>
            </div>
        </template>
    </div>
    <script src="/js/vue.min.js"></script>
    <script src="/js/2.15.12/index.js"></script>
    <link href="/css/2.15.12/index.min.css" rel="stylesheet">
    <script src="/plugins/axios-0.27.2/axios.min.js"></script>
    <script src="/icons/iconfont.js"></script>
    <script src="/js/httpVueLoader.js"></script>
    <script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
    <script language="JavaScript" type="text/javascript">
        //Date原型上添加格式转换方法
        Date.prototype.format = function(fmt) {
            const o = {
                "M+": this.getMonth() + 1,                 //月份
                "d+": this.getDate(),                    //日
                "h+": this.getHours(),                   //小时
                "m+": this.getMinutes(),                 //分
                "s+": this.getSeconds(),                 //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(const k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
    </script>
    <script>

        (function () {
            var vm = window.vm = new Vue({
                el: '.data-manage-table',
                data() {
                    //中文校验
                    const checkReviewName = (rule, value, callback) => {
                        if (!value) {
                            return callback(new Error('姓名不能为空'))
                        }
                        if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
                            callback(new Error('请输入正确的姓名'))
                        } else {
                            callback()
                        }
                    }

                    return {
                        user:{
                            "username":"",
                            "jobnum":"",
                        },
                        //弹出框显示
                        reviewVisible:false,
                        rejectInput:true,
                        current:1,//当前页
                        total:0,//总记录数
                        pageSize:10,//每页记录数
                        pages:0,//总页
                        //搜索样本信息
                        searchSample: {
                            inspectionSheet:'',//检验单号
                            medicalRecordNumber: '',
                            bloodSampleNumber:'',
                            name:'',
                            reviewerName:'',
                            reviewTime:'',
                            reviewState:'',
                        },
                        // 验血结果下拉框
                        bloodTestResultsList:[],
                        //abo血型下拉框
                        aboTypeList:[],
                        //rh血型下拉框
                        rhTypeList:[],
                        // 表格信息
                        tableData: [],
                        //检验状态下拉框
                        statesList:[],
                        //新增样本信息
                        addForm: {
                            inspectionSheet:'',
                            medicalRecordNumber: '',
                            name:'',
                            patientId:'',
                            bloodType: '',
                            rhd: '',
                            alt: '',
                            rbc: '',
                            hbsag:'',
                            hb:'',
                            hcv:'',
                            plt:'',
                            rpr:'',
                            reviewerName:'',
                            reviewerNumber:'',
                            reviewTime: '',
                            rejectReason:'',
                            state:'',
                            reviewState:'',

                        },
                        //新增样本表单验证
                        addFormRules: {
                            reviewName: [
                                {
                                    required : true,
                                    message : '请输入审核人姓名',
                                    trigger : 'blur',
                                },{
                                    validator : checkReviewName,
                                    trigger : 'blur',
                                }
                            ],
                            reviewNumber: [
                                { required: true, message: '请输入审核人工号', trigger: 'blur' },
                            ],
                            reviewTime: [
                                { required: true, message: '请输入审核时间', trigger: 'blur' },
                            ],
                            reviewState: [
                                { required: true, message: '请选择审核状态', trigger: 'change' },
                            ]
                        }
                    }
                },
                computed: {
                    //false为没有查询条件，true为有查询条件
                    searchMode() {
                        if (this.searchSample.inspectionSheet == "" &&this.searchSample.name == "" &&this.searchSample.medicalRecordNumber == ""
                            &&this.searchSample.reviewerName == ""
                            &&this.searchSample.reviewTime == ""
                            &&this.searchSample.reviewState == ""
                            &&this.searchSample.bloodSampleNumber == "")
                            return false
                        else
                            return true
                    }
                },

                watch: {
                    //监听搜索，条件搜索到无条件搜索，current变为1，反之依然
                    'searchMode': function (newVal, oldVal) {
                        this.currentChanged = true
                    },
                    //搜素条件改变时，cunrrent也要变为1
                    'searchSample': {
                        deep: true,
                        handler(newVal, oldVal) {
                            this.currentChanged = true
                        }
                    }
                },

                methods: {
                    //时间格式化
                    formatDate(row, column) {
                        // 获取单元格数据
                        let data = row[column.property]
                        if(data == null) {
                            return null
                        }
                        let dt = new Date(data)
                        return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
                    },
                    //获得当前用户信息
                    getUser(){
                        this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                        return this.user;

                    },
                    checkReview(){
                        this.rejectInput=false
                    },
                    //获得abo血型信息
                    queryAboType(){
                        axios({
                            url: '/aboType/normal/queryAboType',
                            method: 'post',
                        }).then(res => {
                            this.aboTypeList=res.data.data
                        })
                    },
                    // 将表格中abo血型的code转换成name
                    getAboName(code){
                        for (var i = 0; i < this.aboTypeList.length; i++) {
                            if (this.aboTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                this.tableData.bloodType=this.aboTypeList[i].name;
                                return this.tableData.bloodType;
                            }
                        }
                    },
                    //获得Rh血型信息
                    queryRhType(){
                        axios({
                            url: '/rhType/normal/queryRhType',
                            method: 'post',
                        }).then(res => {
                            this.rhTypeList=res.data.data
                        })
                    },
                    // 将表格中rh血型的code转换成name
                    getRhName(code){
                        for (var i = 0; i < this.rhTypeList.length; i++) {
                            if (this.rhTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.rhTypeList[i].name;
                            }
                        }
                    },
                    //获得验血结果信息
                    queryBloodTestResults(){
                        axios({
                            url: '/bloodTestResult/normal/queryBloodTestResults',
                            method: 'post',
                        }).then(res => {
                            this.bloodTestResultsList=res.data.data
                        })
                    },
                    //获得血液检验状态下拉框
                    queryBloodTestStates(){
                        axios({
                            url: '/bloodTestStates/normal/queryBloodTestStates',
                            method: 'post',
                        }).then(res => {
                            this.statesList=res.data.data
                        })
                    },
                    // 将表格中验血结果的code转换成name
                    getBloodTestResultsName(code){
                        for (var i = 0; i < this.bloodTestResultsList.length; i++) {
                            if (this.bloodTestResultsList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodTestResultsList[i].name;
                            }
                        }
                    },
                    //获得血液检验状态下拉框
                    queryReviewStates() {
                        axios({
                            url: '/reviewState/review/queryReviewState',
                            method: 'post',
                        }).then(res => {
                            this.statesList = res.data.data
                            console.log(res+"状态");
                        })
                    },
                    // 将表格中State的code转换成name
                    getStateName(code){
                        for (var i = 0; i < this.statesList.length; i++) {
                            if (this.statesList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.statesList[i].name;
                            }
                        }
                    },
                    //分页查询，显示在table中
                    fetchPageData(current,limit) {
                        axios({
                            method: "get",
                            url: "/bloodTestReview/review/listByPage",
                            params: {
                                currentPage: this.current,
                                pageSize: this.pageSize
                            }
                        }).then(res => {
                            if (res.status == '200') {
                                console.log(res)
                                this.tableData = res.data.data;
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                            } else {
                                this.total = res.data.total;
                                this.pages = res.data.pages;
                                this.$notify({
                                    tile: '警告',
                                    message: '获取分页服务内部错误',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '获取分页数据失败',
                            })
                        })
                    },

                    //点击页码
                    handleCurrentChange: function (val) {
                        this.current = val;
                        if (!this.searchMode)
                            this.fetchPageData(this.current, this.pageSize)
                        else
                            this.search()
                    },

                    //根据查询条件查询验血信息
                    search() {
                        let reviewTime = this.searchSample.reviewTime
                        //日期格式转换
                        for (let i = 0; i < reviewTime.length; i++) {
                            if(reviewTime[i] instanceof Date)
                                reviewTime[i] = reviewTime[i].format("yyyy-MM-dd HH:MM:ss")
                        }
                        let startTime = reviewTime[0]
                        let endTime = reviewTime[1]
                        if (this.currentChanged) {
                            this.current = 1
                            this.currentChanged = false
                        }
                        if (!this.searchMode) {
                            this.fetchPageData(this.current, this.pageSize)
                        } else {
                            axios({
                                url: '/bloodTestReview/review/reviewSearch',
                                method: 'get',
                                params: {
                                    inspectionSheet: this.searchSample.inspectionSheet,
                                    medicalRecordNumber:this.searchSample.medicalRecordNumber,
                                    name:this.searchSample.name,
                                    reviewerName:this.searchSample.reviewerName,
                                    bloodSampleNumber:this.searchSample.bloodSampleNumber,
                                    // reviewTime:this.searchSample.reviewTime,
                                    startTime: startTime != null ? startTime : '',
                                    endTime: endTime != null ? endTime : '',
                                    reviewState:this.searchSample.reviewState,
                                    currentPage: this.current,
                                    pageSize: this.pageSize
                                },
                            }).then(res => {
                                if (res.status == '200') {
                                    console.log(res)
                                    this.tableData = res.data.data;
                                    this.total = res.data.total;
                                    this.pages = res.data.pages;
                                    this.$notify({
                                        tile: '成功',
                                        message: '搜索成功',
                                        type: 'success'
                                    });
                                }

                            else {
                                    this.$notify({
                                        tile: '警告',
                                        message: '搜索出错',
                                        type: 'warning'
                                    })
                                }
                            }).catch(err => {
                                this.$notify.error({
                                    title: '错误',
                                    message: '搜索失败',
                                })
                            })
                        }
                    },
                    //清空搜索条件
                    clear() {
                        for (const key in this.searchSample){
                            this.searchSample[key] = ""
                        }
                        this.fetchPageData(this.current,this.limit)
                    },
                    //点击审核
                    bloodReview(index, row){
                        //选中的样本
                        this.addForm = this.addForm = JSON.parse(JSON.stringify(row));
                        this.addForm.reviewerName=this.getUser().username;
                        this.addForm.reviewerNumber=this.getUser().jobnum;
                        //显示弹出框
                        this.reviewVisible = true
                    },
                    //审核：点击确定按钮
                    addReview(){
                        if (this.currentChanged) {
                            this.current = 1
                            this.currentChanged = false
                        }
                        axios({
                            url: '/bloodTestReview/review/review',
                            method: 'post',
                            data: this.addForm
                        }).then(res => {
                            if (res.data.code == '200') {
                                console.log('操作成功')
                                console.log(res.data)
                                this.signVisible = false
                                this.$notify({
                                    tile: '成功',
                                    message: '操作成功',
                                    type: 'success'
                                })
                                this.fetchPageData(this.current, this.limit);
                                this.reviewVisible=false;
                                this.rejectInput=true;
                            } else {
                                this.$notify({
                                    tile: '警告',
                                    message: '审核出错',
                                    type: 'warning'
                                })
                            }
                        }).catch(err => {
                            this.$notify.error({
                                title: '错误',
                                message: '审核失败',
                            })
                        })

                    },
                    handleSizeChange(val) {
                        console.log(`每页 ${val} 条`);
                        this.pageSize = val
                        this.fetchPageData(this.current, this.pageSize)
                    },

                    //点击取消按钮
                    cancel() {
                        this.reviewVisible=false
                        this.rejectInput=true
                    }
                },
                mounted() {
                    this.fetchPageData(this.current, this.limit)
                    this.queryReviewStates()
                    this.queryAboType()
                    this.queryBloodTestStates()
                    this.queryRhType()
                    this.queryBloodTestResults()
                }

                });
            }
        )()
    </script>

</body>

</html>